<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_文本相关内容1</title>
    <style>
        #szm {
            font-size: 40px;
            background-color: orange;
            line-height: 1.5;
        }
        span{
            font-size: 200px;
            color: red;
        }

        #szm1{
            font-size: 20px;
            color: red;
            background-color: blue;
            line-height: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<!--行高 line-height
    1.line-height过小会怎样？ 文字产生重叠，且最小值是0,不能为负数，当你设置为负数时。浏览器会默认跟据你设置的字体大小去合适选取
    2.line-height是可以继承的，且为了能更好的呈现文字，最好写和字体大小的倍数关系（数值）
    3.line-height 和height 的关系
        设置了height,那么整个块的高度就是height
        不设置height的时候，会根据line-height去计算高度  具体就是 line-height * 行数

    应用场景：
    1.对于多行文字：控制行与行之间的距离
    2.对于单行文字：让height和line-height相等，可以实现文字垂直居中。
-->




<div id="szm">后来有人告 诉我，他们中间有几个人因为从我的腰部往地下跳，竟跌伤了。
    但是他们不久又走了回来。有一个人竟敢走到他能看到我整个面孔的地方，他举起两手抬眼仰视，表示惊讶，用尖锐而清晰的声音高喊：“海琴那?带古尔”，
    其余的人也把这句话喊了几遍，但是那时我还不懂他们的意思。读者们可以相信，我一直这样躺着是非常不舒服的，
    最后终于挣扎起来，想挣脱绑缚。我很侥幸，一下子就挣断了绳索，并且拔出了地上那些缚住我左臂的木钉。我把左臂举到面前，
    才发现了他们捆缚我的方法。这时我用力猛扯一下，虽然十分疼痛，却把左边绑我头发的绳索挣松了一点，这样才稍稍能够把头转动两英寸光景。
    但是我还没来得及捉住他们，x<span>x小人们就跑掉了;</span>他们齐声尖锐刺耳地大喊，喊声过后，我听到一个人高声喊道：“陶尔哥?奉纳克”;
    一眨眼工夫，我觉得百来枝箭射中了我的左手，像针一样刺痛了我;接着他们又向天空射了一阵，就像我们欧洲人丢炸弹似的，我想有不少支箭落在我身上(虽然我不觉得)，有的还落在我脸上，我就赶忙用左手遮住了脸。
    这一阵箭雨过去以后，我不胜悲痛地呻吟起来，过了一会儿我又挣扎着要脱身，他们又放了一阵比刚才放的那些还长的箭，有些人还想用矛刺我的腰部;
    幸亏我穿着一件牛皮背心，他们刺不进去。--《格列佛游记》
</div>


<div id = "szm1">
    这是一个单行文本框
</div>
</body>
</html>